<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>



    .item::before {
      content:"321";
    }
    .item::after {
      content: url(../images/new.png);
      color:green;
    }
    /* 位置不是很好看*/
    .new::after{
content:url();
  /* 相对位置 */
position:relative;
left:5px;
top:2px;
    }
      /* after是一个行内级元素 */
      .box5::after {
        content:"";
        /* 使用伪元素的时候，content不能省略 */
        display:inline-block;
        /* 行内非替换元素也是不能省略 */
        width: 8px;
        height:8px;
        background-color:#f00;
      }
    
  </style>
</head>
<body>
  <div>
<span class="before">123</span>
我是div元素
<span class="after">abc</span>
  </div>

  <div class="box2">
    <span>123</span>
    我是box2  
    <span class="after">abc</span>
  </div>
<!-- 伪元素方案 -->
  <div class="box3 item">我是box3</div>
  <div class="box4 item">我是box4</div>
  <!-- 伪元素的补充 -->
  <div class="box5">我是box5</div>
</body>
</html>